import React from 'react'
import { Router, Route, Redirect, Switch } from 'react-router-dom'
import AuthRoute from './components/AuthRoute'
import Loading from './components/Loading'
// import Article from './pages/Article'

// import ProfileEdit from './pages/Profile/Edit'
// import Layout from './pages/Layout'
// import Login from './pages/Login'
// import NotFound from './pages/NotFound'

import Test from './pages/Test'
import history from './utils/history'
//路由懒加载
const Layout = React.lazy(() => import('./pages/Layout'))
const Login = React.lazy(() => import('./pages/Login'))
const ProfileEdit = React.lazy(() => import('./pages/Profile/Edit'))
const ProfileChat = React.lazy(() => import('./pages/Profile/Chat'))
const NotFound = React.lazy(() => import('./pages/NotFound'))
const Search = React.lazy(() => import('./pages/Search'))
const SearchResult = React.lazy(() => import('./pages/Search/Result'))
const Article = React.lazy(() => import('./pages/Article'))

export default function App() {
  return (
    <div>
      {/* 懒加载必须 Suspense*/}
      <Router history={history}>
        <React.Suspense fallback={<Loading />}>
          {/* 不止一个路由用Switch */}
          <Switch>
            <Redirect exact from="/" to="home" />
            <Route path="/home" component={Layout} />
            {/* 和Layout同级的页面 */}
            {/* <Route path="/login" component={Login} /> */}
            {/* 鉴权路由routeProps形参-对象 */}
            <Route
              path="/login"
              render={() => {
                return <Login />
              }}
            />
            <Route path="/search" exact component={Search} />
            <Route path="/search/result" component={SearchResult} />
            <Route path="/article/:id" component={Article} />
            {/* <Route
              path="/profile/edit"
              render={() => {
                const { token } = getTokenInfo()
                if (token) {
                  return <ProfileEdit />
                } else {
                  // history第一个参数是url 第二个参数就是state
                  return <Redirect to={{ pathname: '/login', state: { from: history.location.pathname } }} />
                }
              }}
            /> */}
            <AuthRoute path="/profile/edit" component={ProfileEdit} />
            <AuthRoute path="/profile/chat" component={ProfileChat} />
            <Route path="/test" component={Test} />
            <Route path="*" component={NotFound} />
          </Switch>
        </React.Suspense>
      </Router>
    </div>
  )
}
